<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card
          v-for="item in list"
          :key="item.id"
          :title="item.title"
          :thumb="item.img_url"
          @click="cardLine('/'+item.id)"
        >
          <template #footer>
            <span class="time">发布时间:{{item.add_time | dateFormat}}</span>
            <span class="click">点击:{{item.click}}</span>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  created: function() {},
  methods: {
    async getNewList() {
      const data = await this.$http.get('/api/getnewslist');
      console.log(data);
      this.list = data.message;
    },
    onLoad() {
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getNewList();
      this.loading = false;
      if (this.list.length >= 10) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    cardLine() {
      // 跳转路由
      this.$router.push('/getnewdetails');
    }
  }
};
</script>

<style scoped>
.time {
  font-size: 12px;
  margin-right: 120px;
  color: blue;
}
.van-card img {
  width: 5px !important;
  height: 5px !important;
}
.click {
  font-size: 12px;
  color: blue;
}
</style>
